<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="auto"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="12">
                <el-form-item label="优惠券名称" prop="coupon_name">
                    <el-input
                        v-model="formData.coupon_name"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="类型" prop="coupon_type">
                    <el-select
                        v-model="formData.coupon_type"
                        placeholder="请选择"
                    >
                        <el-option label="满减券" value="1"></el-option>
                        <el-option label="折扣券 " value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.coupon_type == 1">
                <el-form-item
                    label="优惠金额"
                    prop="coupon_money"
                    :rules="[
                        {
                            required: true,
                            message: '必填项不能为空'
                        },
                        {
                            pattern: /^\d{0,4}(\.\d{0,2})?$/,
                            message: '金额格式错误'
                        }
                    ]"
                >
                    <el-input
                        v-model="formData.coupon_money"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.coupon_type == 2">
                <el-form-item
                    label="折扣比例"
                    prop="discount_percent"
                    :rules="[
                        {
                            required: true,
                            message: '必填项不能为空'
                        },
                        {
                            pattern: /^[1-9][0-9]*/,
                            message: '请输入正整数'
                        }
                    ]"
                >
                    <el-input
                        v-model="formData.discount_percent"
                        clearable
                        placeholder="数字例如：86为八六折"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="消费门槛" prop="usable_money">
                    <el-input
                        v-model="formData.usable_money"
                        clearable
                        placeholder="例如满300可使用填写300"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="发放数量" prop="coupon_num">
                    <el-input
                        v-model="formData.coupon_num"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="核销开始时间" prop="start_time">
                    <el-date-picker
                        type="date"
                        placeholder="请选择"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="formData.start_time"
                    ></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="核销结束时间" prop="end_time">
                    <el-date-picker
                        type="date"
                        v-model="formData.end_time"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="用户可领个数" prop="coupons_per_user">
                    <el-input-number
                        v-model="formData.coupons_per_user"
                        :min="0"
                        :precision="0"
                    ></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="单天发放上限个数" prop="coupons_by_day">
                    <el-input-number
                        v-model="formData.coupons_by_day"
                        :min="0"
                        :precision="0"
                    ></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="上架状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="使用须知" prop="ship_note">
                    <el-input
                        type="textarea"
                        v-model="formData.ship_note"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="confirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="cancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "add-coupon",
    data() {
        return {
            formData: {
                coupon_name: "",
                coupon_type: "1",
                coupon_money: "",
                discount_percent: "",
                usable_money: "",
                coupon_num: "",
                start_time: "",
                end_time: "",
                coupons_per_user: 1,
                coupons_by_day: 1,
                status: "1",
                ship_note: ""
            },
            formRules: {
                coupon_name: {
                    required: true,
                    message: "必填项不能为空"
                },
                coupon_type: {
                    required: true,
                    message: "必填项不能为空"
                },
                usable_money: [
                    {
                        required: true,
                        message: "必填项不能为空"
                    },
                    {
                        pattern: /^\d{0,4}(\.\d{0,2})?$/,
                        message: "金额格式错误"
                    }
                ],
                coupon_num: [
                    {
                        required: true,
                        message: "必填项不能为空"
                    },
                    {
                        pattern: /^[1-9][0-9]*/,
                        message: "请输入正整数"
                    }
                ],
                start_time: {
                    required: true,
                    message: "必填项不能为空"
                },
                end_time: {
                    required: true,
                    message: "必填项不能为空"
                },
                coupons_per_user: {
                    required: true,
                    message: "必填项不能为空"
                },
                coupons_by_day: {
                    required: true,
                    message: "必填项不能为空"
                },
                status: {
                    required: true,
                    message: "必填项不能为空"
                },
                ship_note: {
                    required: true,
                    message: "必填项不能为空"
                }
            }
        };
    },
    methods: {
        confirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    formData.start_time =
                        new Date(formData.start_time).getTime() / 1000;
                    formData.end_time =
                        new Date(formData.end_time).getTime() / 1000;
                    await post({
                        url: "/admin/shop.coupon/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                }
            });
        },
        cancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>